<template>
  <div class="container" style="margin-top: 20px;">
    <el-button @click="handleAdd" style="margin: 20px;">添加</el-button>
    <el-table :data="tableData">
      <el-table-column label="个人信息" align="center">
        <el-table-column
          prop="name"
          label="名字"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="tel"
          label="电话"
          align="center"
        ></el-table-column>
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址"
        align="center"
      ></el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
            >编辑</el-button
          >
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <el-dialog :visible.sync="dialogVisible" width="30%" center :title="title">
      <el-form
        :inline="true"
        :model="addressList"
        class="demo-form-inline"
        :rules="rules"
        ref="addressList"
      >
        <el-form-item label="姓名" prop="name">
          <el-input v-model="addressList.name" placeholder="姓名"></el-input>
        </el-form-item>
        <el-form-item label="电话" prop="tel">
          <el-input v-model="addressList.tel" placeholder="电话"></el-input>
        </el-form-item>
        <el-form-item label="地址" prop="address">
          <el-input v-model="addressList.address" placeholder="地址"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitForm()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      addressList: {},
      title: "",
      rules: {
        name: [
          {
            required: true,
            message: "请输入您的姓名",
            trigger: "blur",
          },
          {
            min: 2,
            max: 5,
            message: "长度在 2 到 5 个字符",
            trigger: "blur",
          },
        ],
        address: [
          {
            required: true,
            message: "请输入地址",
            trigger: "blur",
          },
        ],
        tel: [
          {
            required: true,
            message: "请输入您的电话号码",
            trigger: "blur",
          },
          {
            min: 11,
            max: 11,
            message: "请输入正确的电话号码(11位)",
            trigger: "blur",
          },
        ],
      },
      dialogVisible: false,
      Base_Url: "http://localhost:8080/mall",
    };
  },
  created: function() {
    this.getData();
  },
  methods: {
    handleAdd() {
      this.title = "添加";
      this.addressList = {};
      this.dialogVisible = !this.dialogVisible;
    },
    handleEdit(index, row) {
      // console.log(index, row);
      this.title = "修改";
      let { name, id, address, tel, member_id } = row;
      this.addressList = {
        name: name,
        id: id,
        address: address,
        tel: tel,
        member_id: member_id,
      };
      this.dialogVisible = !this.dialogVisible;
    },
    handleDelete(index, row) {
      this.$confirm("是否要删除这个地址?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.tableData.splice(index, 1);
          this.$axios
            .get(`${this.Base_Url}/deleteAddress`, {
              params: {
                id: row.id,
              },
            })
            .then((ret) => {
              if (ret.status == 200) {
                this.$message("删除成功！！");
              }
            });
        })
        .catch(() => {
          this.$message("已取消删除");
        });
    },
    getData() {
      this.$axios.get(`${this.Base_Url}/findAlladdress`).then((ret) => {
        this.tableData = ret.data.message;
      });
    },
    submitForm() {
      this.$refs.addressList.validate((valid) => {
        if (valid) {
          let { name, id, address, tel, member_id } = this.addressList;
          if (this.title == "修改") {
            this.$axios
              .get(`${this.Base_Url}/updateAddress`, {
                params: {
                  name: name,
                  id: id,
                  address: address,
                  tel: tel,
                  member_id: member_id,
                },
              })
              .then((ret) => {
                if (ret.status == 200) {
                  this.$message("修改成功!");
                  this.getData();
                }
              });
          } else {
            //addAddress
            this.$axios
              .get(`${this.Base_Url}/addAddress`, {
                params: {
                  name: name,
                  id: id,
                  address: address,
                  tel: tel,
                  member_id: member_id,
                },
              })
              .then((ret) => {
                if (ret.status == 200) {
                  this.$message("添加成功!");
                  this.getData();
                }
              });
          }
          this.dialogVisible = !this.dialogVisible;
        }
      });
    },
  },
};
</script>

<style lang="less" scoped="scoped">
.el-table {
  font-size: 18px;
}
</style>
